<template>
  <transition name="slide">
    <div class="slide-up" v-show="show">
      
      <slot></slot>
    </div>
  </transition>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    chooseLottery(id, index) {
      this.$emit('click', id, index)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  .slide-up 
    width 100% 
    max-height 340px 
    border-top-right-radius 10px 
    border-top-left-radius 10px 
    background #fff
    position absolute 
    bottom 0 
    right 0
    left 0
    z-index 999999
    box-sizing border-box 
    padding 20px 20px 10px 20px
    overflow-y scroll
    &.slide-enter, &.slide-leave-to 
      transform translate3d(0, 100%, 0)
    &.slide-enter-active, &.slide-leave-to  
      transition all 0.3s
    .all-lotterys 
      .contents 
        display flex 
        flex-wrap wrap 
        align-items center
        justify-content space-between 
        width 100%
        height 100% 
        box-sizing border-box 
        .content 
          box-sizing border-box 
          width calc((100% - 20px) / 3) 
          height 32px
          line-height 32px
          text-align center
          margin-bottom 10px
          color $color-theme-dark
          &.router-link-active
            color $color-theme-red 
</style>